<template>
    <div>
        <p>发表评论</p>
        <hr />
        <textarea placeholder="请输入您的评论" rows="5" v-model="msg">
            
        </textarea>
        <mt-button type="primary"  size="large" @click="postComment">发表评论</mt-button>
        <div class="comment-list" v-for="item,index in commentList" :key="item.id">
            <p>
                <img :src="item.user.profile_image">
                第{{index+1}}楼 
                用户:<span class="username">{{item.user.username}}</span> 
            </p>
            <p class="cot-like">
                <span>{{item.content}}</span>
                <span >
                    <a @click="like(index)" ><i :class="['mui-icon-extra mui-icon-extra-like', item.flag==true?'iconcolor':'']" ></i></a>
                    <i >{{item.like_count}}</i>
                </span>
            </p>
            <p class="ctime">
                <span >发表时间：{{item.ctime|dateFormat}}</span>
            </p>
        </div>
        <button type="button" class="mui-btn mui-btn-royal mui-btn-block mui-btn-outlined" @click="getMore">加载更多</button>
    </div>
</template>
<script >
    import {Toast} from 'mint-ui'
    export default{
        data(){
            return {
                // 评论总列表
                commentList:[],
                // 加载更多的页码
                pageIndex:1,
                // 评论信息
                msg:'',
                count:0
            }
        },
        created(){
            this.comments()
        },
        methods:{
            comments(){
                // 加载下一页的时候改变页码
                this.$http.get('satinCommentApi?id=27610708&page='+this.pageIndex).then(ret=>{
                    // 通过concat来拼接
                    this.commentList=this.commentList.concat(ret.body.data.normal.list)
                })
            },
            like(index){
                // 改变赞的颜色 把索引传进来再改变列表中的值
               this.commentList[index].like_count=this.commentList[index].like_count+1
               // 点赞的手势是伪类只能动态添加类样式来改变颜色
               this.commentList[index].flag=true
            },
        // 加载下一页
            getMore(){
                this.pageIndex++;
                this.comments()
            },
            postComment(){
                this.$http.post('satinCommentApi?id=27610708&page='+this.pageIndex,{
                    content:this.msg
                }).then(ret=>{
                    var add={
                    content:this.msg,
                    like_count:0,
                    ctime:Date.now(),
                    user:{username:'默认'}
                }
                this.commentList.unshift(add)
                })
            }
        },
    }
</script>

<style scoped lang="scss">
    .comment-list {
        margin-top: 20px;
        p{
            padding:5px;
                &:nth-child(1){
                    background-color: #ccc;
                    color: #000;
                        img{
                            width: 20px;
                            height: 20px;
                        }
                    }
                .username{
                    color: #656ad5;
                    }
        }
    .ctime{
        text-align: right;
    }
    .cot-like{
        display: flex;
        justify-content: space-between;
            a {
                color: #88838d;
                font-size: 18px;
            }
        .iconcolor{
            &:before{
                color: red;
            }
        }
    }
    }
    textarea{
    font-size: 12px;
    }

 
</style>